<template>
  <div class="detail-wrapper">
    <img :src="detailImg" class="header-img">
    <div class="detail-header">
      <span class="header-title">{{this.movieInfo.title}}</span>
      <span class="header-sub">{{this.detailSub}}</span>
      <div class="header-like">
        <span class="like-num">{{this.movieInfo.wish_count}}</span>
        <span class="like-text">人喜欢</span>
        <span class="like-num">{{this.movieInfo.comments_count}}</span>
        <span class="like-text">人评论</span>
      </div>
    </div>
    <img :src="detailImg" class="detail-img">
    <div class="detail-summary">
      <div class="summary-title">{{this.movieInfo.original_title}}</div>
      <div class="flex-row">
        <span>评分</span>
        <stars :starsRating="this.starsRating" :key="this.movieInfo.id"></stars>
      </div>
      <div class="flex-row">
        <span>导演</span>
        <span>{{this.getActorList(this.movieInfo.directors)}}</span>
      </div>
      <div class="flex-row">
        <span>影人</span>
        <span>{{this.getActorList(this.movieInfo.casts)}}</span>
      </div>
      <div class="flex-row">
        <span>类型</span>
        <span>{{String(this.movieInfo.genres)}}</span>
      </div>
    </div>
    <div class="detail-synopsis">
      <span class="synopsis-title">剧情简介</span>
      <span class="synopsis-content">{{this.movieInfo.summary}}</span>
    </div>
    <div class="detail-actor">
      <span class="actor-title">影人</span>
      <div class="actor-group">
        <div v-for="actor in this.movieInfo.casts" :key="actor.name">
          <div class="actor-item">
            <img :src="actor.avatars.large" class="actor-img">
            <span class="actor-name">{{actor.name}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getImages} from 'api/img'
import Stars from './Stars'
export default {
  name: 'MovieDetail',
  components: {
    Stars
  },
  data () {
    return {
      movieInfo: Array,
      detailImg: '',
      detailSub: '',
      starsRating: {}
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'MovieDetail') {
        this.movieInfo = to.query.detailInfo
        this.getDeatilInfo(this.movieInfo)
      }
    }
  },
  created () {
    this.movieInfo = this.$route.query.detailInfo
    this.getDeatilInfo(this.movieInfo)
  },
  methods: {
    getActorList (casts) {
      let actorList = ''
      if (!!casts && casts.length > 0) {
        casts.forEach((item, i) => {
          actorList += i === 0 ? item.name : `/${item.name}`
        })
      }
      return actorList
    },
    getActorImg (casts) {
      if (!!casts && casts.length > 0) {
        casts.forEach(item => {
          item.avatars.large = getImages(item.avatars.large)
        })
      }
      return casts
    },
    getDeatilInfo (movieData) {
      this.detailImg = getImages(movieData.images.large)
      this.starsRating = movieData.rating
      this.detailSub = `${movieData.countries[0]}·${movieData.year}`
      movieData.casts = this.getActorImg(movieData.casts)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variable'
  .detail-wrapper
    display: flex
    flex-direction: column
    .header-img
      width: 100%
      height: 4.5rem
      -webkit-filter:blur(.2rem)
    .detail-header
      widht: 100%
      display: flex
      flex-direction: column
      position: absolute
      top: 1.8rem
      left: .4rem
      .header-title
        font-size: .6rem
        font-weight: bold
        color: #fff
      .header-sub
        font-size: .4rem
        color: #fff
        margin: .3rem 0
      .header-like
        display: flex
        flex-direction: row
        .like-num
          color: $color-light
          margin-right: .05rem
        span
          font-size: .3rem
          margin-right: .1rem
    .detail-img
      position: absolute
      width: 2.5rem
      height: 3.3rem
      top: 1.8rem
      right: .6rem
    .detail-summary
      padding-bottom: .1rem
      border-bottom: 1px solid $color-shadowHr
      .summary-title
        font-size: .35rem
        font-weight: bold
        margin: 0 0 .2rem .4rem
      .flex-row
        color: $color-shadow
        margin: .1rem .4rem
        display: flex
        align-items: center
        span
          margin-right: .2rem
    .detail-synopsis
      padding-bottom: .1rem
      border-bottom: 1px solid $color-shadowHr
      display: flex
      flex-direction: column
      padding: .1rem .4rem .2rem .4rem
      .synopsis-title
        font-size: .4rem
        color: $color-shadow
        margin: .2rem 0
      .synopsis-content
        font-size: .4rem
    .detail-actor
      display: flex
      flex-direction: column
      padding: .1rem .4rem
      .actor-title
        font-size: .4rem
        color: $color-shadow
        margin: .2rem 0
      .actor-group
        justify-content: space-between
        display: flex
        .actor-item
          display: flex
          flex-direction: column
          width: 2.3rem
          min-width: 0
          .actor-img
            width: 2.2rem
            height: 3rem
          .actor-name
            color: $color-shadow
            margin: .15rem 0
            text-align: center
</style>
